<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-23 11:24:35
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-25 17:46:12
-->
<template>
  <div>
    <el-dialog
      title="导入信息"
      :visible.sync="dialog.guideShow"
      width="50%"
      custom-class="guideClass"
      @close="guideClose"
      v-loading="loading"
    >
      <div class="content">
        <div class="content-left">
          <div class="left-title">
            1.<span class="different">下载</span>信息模版，填写模版信息
          </div>
          <div class="left-img">
            <img src="@/assets/images/download.png" alt="" />
          </div>
          <div class="left-btn">
            <el-button size="default" plain round>
              <a
                href="https://tongxingzhou-dev.oss-cn-hangzhou.aliyuncs.com/file/%E8%AF%81%E4%B9%A6%E7%BB%B4%E6%8A%A4%E6%A8%A1%E6%9D%BF.xlsx"
              >
                下载模板
              </a>
            </el-button>
          </div>
        </div>
        <div class="content-right">
          <div class="righ-title">
            2.<span class="different">上传</span>信息模版，填写模版信息
          </div>
          <div class="right-img">
            <img src="@/assets/images/upload.png" alt="" />
          </div>
          <div class="right-btn">
            <el-upload
              action="#"
              ref="upload"
              :on-remove="removeChange"
              :auto-upload="false"
              accept=".xlsx"
              multiple
              :limit="1"
              :file-list="fileList"
              :on-change="handleChange"
              :class="{ disabled: fileList.length > 0 }"
            >
              <el-button slot="trigger" round plain>选择文件</el-button>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="cover">
        <span>导入时，数据和原有内容重复时，是否覆盖</span>
        <el-switch v-model="cover" :active-value="true" :inactive-value="false">
        </el-switch>
      </div>
      <span slot="footer" class="footer">
        <div class="left">查看历史<span class="different">导入数据</span></div>
        <div class="right">
          <el-button @click="dialog.guideShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { importType } from "@/api/cert/certInfo";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      cover: false,
      fileList: [],
    };
  },
  methods: {
    handleChange(file) {
      this.fileList.push(file);
    },
    // 上传成功之后
    removeChange(file) {
      this.fileList = [];
    },
    // 保存
    onSubmit() {
      this.loading = true;
      let fd = new FormData();
      fd.append("file", this.fileList[0].raw);
      // fd.append("cover", this.cover);
      importType(fd).then((res) => {
        this.loading = false;
        if (res.code !== 200) return;
        this.$message.success(res.msg);
        this.$parent.getList();
        this.dialog.guideShow = false;
      });
    },
    // 关闭
    guideClose() {
      this.dialog.guideShowEject = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.guideClass {
  .el-dialog__body {
    height: 420px;
  }
  .el-dialog__footer {
    .footer {
      display: flex;
      justify-content: space-between;
    }
  }
}
.content {
  display: flex;
  height: 300px;

  .content-left {
    width: 50%;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .left-img {
      width: 49px;
      height: 60px;
      margin-top: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .left-btn {
      margin-top: 39px;
    }
  }
  .content-right {
    width: 50%;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .right-img {
      width: 49px;
      height: 60px;
      margin-top: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right-btn {
      margin-top: 39px;
    }
  }
}
.different {
  color: #1267fa;
}
/deep/ .disabled .el-upload--text {
  display: none;
}
</style>